<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用背景色为红色-->
    <style th:inline="css">
        #[[${elementId}]]{
            width:100px;
            height:100px;
            background:[[${bgColor}]];
        }
    </style>
    <script th:inline="javascript" type="text/javascript">
        alert([[${student.name}]]);
    </script>
</head>
<body>
<!--${...},称为变量表达式，该表达式一般通过th:text标签属性进行展示的-->
<p th:text="${welcome}">这里会显示动态数据</p>
<hr/>
<div th:text="${student}">这里会显示动态数据</div>
<div th:text="${student.name}">这里会显示动态数据</div>
<hr>

<!--*{...}选择表达式，一般用于展示对象的属性。“对象.属性”方式-->
<div th:object="${student}">
    <p>姓名：<span th:text="*{name}"></span></p>
    <p>年龄: <span th:text="*{age}"></span></p>
</div>
<hr>
<p>姓名：<span th:text="*{student.name}"></span></p>
<p>年龄：<span th:text="*{student.age}"></span></p>

<!--url表达式@{....} -->
<hr>
<!--使用+进行字符串拼接-->
<a th:href="@{'http://localhost:8098/xxx/find?name='+${student.name}}">查询</a>
<!--使用双竖线无需字符串拼接，简单易读-->
<a th:href="@{|http://localhost:8098/xxx/find?name=${student.name}|}">查询2</a>
<!--/开头的相对地址 ,在url表达式中，thymeleaf会将开头的斜杠(/)解析为当前工程的上下文路径ContextPath，浏览器会自动添加“http://主机名:端口号”-->
<hr>
<a th:href="@{|/find?name=${student.name}|}">查询4</a>
<a th:href="@{|/find?name=${student.name}&age=${student.age}|}">查询5</a>
<hr>
<p th:if="${gender} == 'male'">男</p>
<hr>
<!--th：case="*" 表示默认case-->
<div th:switch="${age/10}">
    <p th:case="0">儿童</p>
    <p th:case="1">青年</p>
    <p th:case="2">壮年</p>
    <p th:case="3">成年</p>
    <p th:case="*">老年</p>
</div>
<hr>
<p th:each="stu:${students}">
    <span th:text="${stu.name}"></span>
    <span th:text="${stu.age}"></span>
</p>
<hr>
<p th:each="stu,xxx:${students}">
<!--    声明状态对象为xxx-->
    <span th:text="${xxx.count}"></span>
    <span th:text="${stu.name}"></span>
    <span th:text="${stu.age}"></span>
</p>
<hr>
<p th:each="stu:${students}">
    <!--    状态对象为当前遍历对象加stat后缀-->
    <span th:text="${stuStat.index}"></span>
    <span th:text="${stu.name}"></span>
    <span th:text="${stu.age}"></span>
</p>
<hr>
<p th:each="entry:${stuMap}">
    <span th:text="${entryStat.count}"></span>
    <span th:text="${entry.key}"></span>
    <span th:text="${entry.value}"></span>
    <span th:text="${entry.value.name}"></span>
    <span th:text="${entry.value.age}"></span>
</p>
<!--th：text/th:utext 会解析文本中的html标签-->
<hr>
<div th:text="${welcome}"></div>
<div th:utext="${welcome}"></div>
<hr>
<img th:src="@{|/images/${photo}|}"/>

<hr>
<!--该方式会正确显示-->
<p th:inline="text">
    他的名字是：[[${student.name}]]
</p>
<hr>
<p>
    我的名字是：[[${student.name}]]
</p>
<hr>
<div id="reddiv">
    我的背景色要变为红色
</div>


</body>
</html>